<template>
  <div class="box">
    <div class="df aic b_right_top">
      <img style="width:20px;height:19px" src="@/assets/government/smartLnternet/smart_3.png" />
      <span class="fs14 c15DBF5 ml5">生长期</span>
      <img
        class="ml5"
        style="width:20px;height:20px"
        src="@/assets/government/smartLnternet/smart_4.png"
      />
      <span class="fs14 cED4420 ml5">2个</span>
    </div>
    <div class="df aic fww mt70 jcsa">
      <div class="df aic mb10" v-for="(item,index) in iconList" :key="index">
        <img style="width:40px;height:44px" :src="item.icon" alt />
        <div class="ml5">
          <div class="fs14" style="font-size:18px">{{item.value}}</div>
          <div class="c15DBF5" style="font-size:14px">{{item.title}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      iconList: [
        {
          title: "空气温度",
          value: "23.5°C",
          icon: require(".././../../../assets/government/smartLnternet/smart_13.png")
        },
        {
          title: "空气湿度",
          value: "47%",
          icon: require(".././../../../assets/government/smartLnternet/smart_8.png")
        },
        {
          title: "土壤温度",
          value: "15.5°C",
          icon: require(".././../../../assets/government/smartLnternet/smart_9.png")
        },
        {
          title: "土壤湿度",
          value: "45.2%",
          icon: require(".././../../../assets/government/smartLnternet/smart_10.png")
        },
        {
          title: "光照强度",
          value: "441lux",
          icon: require(".././../../../assets/government/smartLnternet/smart_11.png")
        },
        {
          title: "二氧化碳",
          value: "38ppm",
          icon: require(".././../../../assets/government/smartLnternet/smart_12.png")
        }
      ]
    };
  },
  mounted() {},
  methods: {}
};
</script>
  
  <style lang="scss" scoped>
.box {
  width: 361px;
  height: 185px;
  padding: 0 10px;
  background-size: 361px;
  position: relative;
  background-image: url(".././../../../assets/government/smartLnternet/smart_1.png");
  box-sizing: border-box;
  .b_right_top {
    position: absolute;
    right: 20px;
    top: 10px;
  }
}
.c15DBF5 {
  color: #15dbf5;
}
.cFEC87F {
  color: #fec87f;
}
.cED4420 {
  color: #ed4420;
}
.fs14 {
  font-size: 14px;
  font-weight: bold;
}
</style>
  